<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="utf-8"/>
    <title>Simple example - Editor.md examples</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/editormd/examples/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="../static/img/logo.png" th:href="@{/img/logo.png}" type="image/x-icon"/>

</head>
<style>
    body {
        height: 100%;
        width: 100%;
    }

    .mdlayout {
        width: 100%;
        height: 100%;
        position: fixed;
    }

    .mdheader {
        padding-top: 2px;
        height: 80px;
        border-radius: 2px;
    }

    .line1part1, .line2part {
        margin-left: 50px;
    }

    .line1part1 span, .line1part1 input {
        border-color: #f6f6f6;
        background-color: #f5f3f3;
    }

    .line1part1 span:hover {
        background-color: #6ec959;
        color: #ffffff;
    }

    #publishbtn {
        background-color: #e7e7e7;
        /*color: white;*/
        outline: none;
        border: none;
    }

    #savebtn {
        background-color: #e8e8e8;
        /*color: white;*/
        outline: none;
        border: none;
    }

    #savebtn:hover, #publishbtn:hover {
        background-color: #7fc492;
        color: yellow;
    }

    .line2part {
        width: 100%;
    }

    .line2part input {
        width: 100%;
        border-color: #aacde5;
        background-color: #ffffff;
        border-radius: 10px;
    }

    .mdedit {
        position: fixed;
        width: 100%;
        bottom: 20px;
        top: 80px;
    }

    .mdfooter {
        bottom: 0;
        border: 3px solid deeppink;
        position: fixed;
    }


</style>

<body>
<div class="mdlayout">
    <!--    1-->
    <div class="container-fluid mdheader">
        <div class="row">
            <div class="col-md-7 ">
                <div class="input-group line1part1">
                    <span class="input-group-addon">管理员</span>
                    <input type="text" class="form-control" id="admin" value="jjz" disabled
                           style="background-color: #a4a4e7; width: 80px;">
                    <span class="input-group-addon">标题</span>
                    <input type="text" class="form-control" id="title" style="width: 200px" placeholder="标题 10个字符内"
                           maxlength="11" required>
                    <span class="input-group-addon">别名</span>
                    <input type="text" class="form-control" id="nikename" style="width: 200px" placeholder="10字符以内"
                           maxlength="11">
                    <span class="input-group-addon">科室</span>
                    <input type="text" class="form-control" id="department" style="width: 140px" placeholder="6字符以内"
                           maxlength="7">
                </div>
            </div>
            <div class="col-md-3 col-md-offset-2">
                <div class="btn-group btn-group-justified" role="group" aria-label="...">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default" id="publishbtn">发布</button>
                    </div>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default" id="savebtn">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 2px">
            <div class="col-md-10">
                <div class="input-group line2part">
                    <input type="text" class="form-control" id="introduce" placeholder="封面介绍描述文字  45字符以内">
                </div>
            </div>
        </div>
    </div>

    <!--2-->
    <div class="mdedit">
        <div id="bbseditormd">
            <textarea style="display:none;">
[TOC]
#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;

#### Editor.md directory


```html
&lt;!-- English --&gt;
&lt;script src="../dist/js/languages/en.js"&gt;&lt;/script&gt;

&lt;!-- 繁體中文 --&gt;
&lt;script src="../dist/js/languages/zh-tw.js"&gt;&lt;/script&gt;
```
        </textarea>
        </div>
    </div>

    <!--    3-->
    <div class="mdfooter">
        sf sadffsdfsdf
    </div>

</div>

<!--引入所需依赖-->
<script th:src="@{/editormd/examples/js/jquery.min.js}"></script>
<script th:src="@{/editormd/editormd.min.js}"></script>

<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd("bbseditormd", {
            width: "100%",
            height: "100%",
            syncScrolling: "single",
            path: "/editormd/lib/",

            // theme: "dark",
            // previewTheme: "dark",
            // editorTheme: "pastel-on-dark",
            // markdown: md,
            codeFold: true,
            //syncScrolling : false,
            saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea  这个配置，方便post提交表单
            searchReplace: true,
            //watch : false,                // 关闭实时预览
            htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
            // toolbar  : false,             //关闭工具栏
            //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
            emoji: true,
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
            //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
            //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
            //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
            //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff

            //启动本地图片上传功能
            imageUpload: true,
            watch: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/uploadjpg",//后端的上传图片服务地址
            onload: function () {
                //console.log('onload', this);
                //this.fullscreen();
                //this.unwatch();
                //this.watch().fullscreen();

                //this.setMarkdown("#PHP");
                //this.width("100%");
                //this.height(480);
                //this.resize("100%", 640);
            }
        });
    });
    $("#savebtn").click(function (){
        alert(testEditor.getMarkdown())
    })
    $("#publishbtn").click(function (){
        alert(testEditor.getHTML())
    })
</script>
</body>
</html>
